<template>
  <div id="about">
    <div class="content">
      <AboutContent :page="showPage"></AboutContent>
    </div>
    <div id="sidebar-root">
      <div id="content">
        <div v-for="item in routerList" :key="item.text">
          <button v-if="item.isShow" class="button button-true" @click="changePage(item.page)">
            {{ item.text }}
          </button>
          <button v-else class="button button-false" @click="changePage(item.page)">
            {{ item.text }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import AboutContent from "../components/About/AboutContent.vue";

@Options({
  components: {
    AboutContent,
  },
})
export default class About extends Vue {
  showPage = "introduce";
  routerList = [
    { text: "信仰", page: "faith", isShow: false },
    { text: "理想", page: "ideal", isShow: false },
    { text: "站主", page: "introduce", isShow: true },
  ];
  // click event
  changePage(page: string) {
    this.showPage = page;
    for(var i = 0;i<this.routerList.length;i++){
      if(page === this.routerList[i].page){
        this.routerList[i].isShow = true;
      }
      else{
        this.routerList[i].isShow = false;
      }
    }
  }
}
</script>

<style lang="scss">
#about {
  position: absolute;
  width: 100%;
  top: 50px;
  bottom: 0px;
  display: flex;
  // 显示内容
  .content {
    height: 100%;
    width: 95%;
    display: flex;
  }
  // 导航栏
  #sidebar-root {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 5%;
    // background-color: rgba($color: #000000, $alpha: 0.8);
    #content {
      width: 100%;
      height: 100%;
      div {
        height: 33.33%;
        //按钮样式
        .button {
          width: 100%;
          height: 100%;
          padding: 30px;
          border: none;
          font-family: harmony-sans-black;
          font-size: 20px;
        }
        .button-true {
          border-right: 3px solid white;
          color: white;
          background: linear-gradient(
            to right,
            rgba($color: black, $alpha: 0.3),
            rgba($color: black, $alpha: 0.7),
          );
        }
        .button-false {
          color: #2c3e50;
          background-color: rgba($color: #000000, $alpha: 0.3);
        }
      }
    }
  }
}
</style>